<template>
    <div class="m-b-10" style="background: #f3f3f4;">
      <div class="title">
        总部首页 <span><strong style="color:#1ab394;">[ {{merchantGroupName}} ]</strong></span>
      </div>
        <div class="table-padding">
            <el-row :gutter="20" style="margin-right: 0">
                <el-col :span="6" class="p-l-0">
                    <div class="grid-content" style="background-color: #1ab394;color: #fff">
                        <el-row :gutter="20">
                            <el-col :span="7" class="p-l-10p p-t-15">
                                <i class="icon icon-qunfengshanghu f-35"></i>
                                <!--<i class="icon icon-qunfengshanghu" style="font-size: 50px;font-weight: 700;margin-top: 30px;margin-left: 53px;display: inline-block;"></i>-->
                            </el-col>
                            <el-col :span="17" style="text-align: left">
                                <!--<i class="icon icon-qunfengshanghu"></i>-->
                                <!--<i style="font-weight: 700;display: inline-block;margin-top:10px;">&nbsp;</i>--><br>
                                商户号<br>
                                <span style="font-size: 26px">{{merchantGroupId}}</span><br />

                            </el-col>
                        </el-row>
                    </div>
                    <div class="grid-bottom">
                        <i class="icon icon-duanxin c-4 f-18 pos-rel pos-t-2"></i>
                        剩余短信<span class="f-b c-1">0</span>条
                    </div>
                </el-col>
              <el-col :span="18" style="background-color: #fff; margin-top: 10px;">
                <el-row>
                  <el-col :span="8">
                    <div class="border-right-color">
                      <div class="bg-content text-center">
                        <br><br>
                        营业总额（元）
                        <br>
                        <span class="money-value">2000</span><br />
                        <span>客流量：0 | 客单数：0</span>
                      </div>
                      <div class="grid-bottom"></div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="border-right-color">
                      <div class="bg-content text-center">
                        <br><br>
                        单店最高营业额（元）
                        <br>
                        <span class="money-value">2000</span><br />
                        <span>客流量：0 | 客单数：0</span>
                      </div>
                      <div class="grid-bottom"></div>
                    </div>
                  </el-col>
                  <el-col :span="8" class="p-r-0">
                    <div class="bg-content text-center">
                      <br><br>
                      优免总额（元）
                      <br>
                      <span class="money-value">2000</span><br />
                      <span>优惠总额：0 | 免单总额：0</span>

                    </div>
                    <div class="grid-bottom"></div>
                  </el-col>
                </el-row>

              </el-col>

            </el-row>
            <div class="icon-chart m-t-m5">
                <p class="info-block-title">营业额</p>
                <el-row :gutter="24">
                    <el-col :span="6" style="text-align: left; padding-left: 26px">
                        <el-radio-group v-model="tradeType" @change="changeType" style="margin-right: 20px;">
                            <el-radio-button label="today">今天</el-radio-button>
                            <el-radio-button label="yesterday">昨天</el-radio-button>
                            <el-radio-button label="seven">最近7天</el-radio-button>
                            <el-radio-button label="thirty">最近30天</el-radio-button>
                        </el-radio-group>
                    </el-col>
                  <el-col :span="8" class="text-left">
                    <el-date-picker
                      v-model="tradeDate"
                      align="right"
                      type="date"
                      :editable="false"
                      :clearable="false"
                      style="margin-left: 20px"
                      placeholder="请选择查询日期"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="10" style="text-align: right">
                    <el-radio-group v-model="districtType" @change="changeDistricType" style="margin-right: 20px;">
                      <el-radio-button label="shop">门店</el-radio-button>
                      <el-radio-button label="area">区域</el-radio-button>
                    </el-radio-group>
                  </el-col>
                </el-row>
                <br>
                <br>
                <div id="myChart" style="width:100%;padding-left: -10%;height:400px;"></div>
            </div>

          <!--商品分类 占比-->
          <div class="icon-chart" style="height: 500px">
            <p class="info-block-title">商品分类营收占比（堂食）</p>
            <br>
            <el-row :gutter="20">
              <el-col :span="12">
                <div id="myChart2" style="width:100%;padding-left: -20%; margin-top:-10%; height:400px;"></div>
              </el-col>
              <el-col :span="12" style="padding-right:30px;">
                <div style="border-bottom: 2px solid #d1dbe5; padding: 5px 5px 10px 5px;">
                  <el-row :gutter="20">
                    <el-col :span="10">
                      <span style="font-weight: 700;">商品名称</span>
                    </el-col>
                    <el-col :span="7">
                      <span style="font-weight: 700;">实收总额</span>
                    </el-col>
                    <el-col :span="7">
                      <span style="font-weight: 700;">营收占比(%)</span>
                    </el-col>
                  </el-row>
                </div>
                <div v-for="i in dishesTop" style="border-bottom: 1px dashed #ddd;padding: 10px">
                  <el-row :gutter="20" >
                    <el-col :span="10">
                      {{i.name}}
                    </el-col>
                    <el-col :span="7">
                      ￥{{i.value | money}}
                    </el-col>
                    <el-col :span="7">
                      {{i.value*100 / dishesTopAmount | money}}%
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
          <!--商品占比-->
            <div class="icon-chart" style="height: 500px">
                <p class="info-block-title">商品营收占比（堂食）</p>
                <br>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div id="myChart1" style="width:100%;padding-left: -20%; margin-top:-10%; height:400px;"></div>
                    </el-col>
                    <el-col :span="12" style="padding-right:30px;">
                        <div style="border-bottom: 2px solid #d1dbe5; padding: 5px 5px 10px 5px;">
                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <span style="font-weight: 700;">商品名称</span>
                                </el-col>
                                <el-col :span="7">
                                    <span style="font-weight: 700;">实收总额</span>
                                </el-col>
                                <el-col :span="7">
                                    <span style="font-weight: 700;">营收占比(%)</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-for="i in dishesTop" style="border-bottom: 1px dashed #ddd;padding: 10px">
                            <el-row :gutter="20" >
                                <el-col :span="10">
                                    {{i.name}}
                                </el-col>
                                <el-col :span="7">
                                    ￥{{i.value | money}}
                                </el-col>
                                <el-col :span="7">
                                    {{i.value*100 / dishesTopAmount | money}}%
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>

          <!--收银异常数据（食堂）-->
          <div class="icon-chart m-t-m5">
            <p class="info-block-title">收银异常数据（食堂）</p>
            <div id="myChart3" style="width:100%;padding-left: -10%;height:400px;"></div>
          </div>
        </div>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    import PluginConfirm from '../../components/PluginConfirm.vue'
    import echarts from 'echarts'
    import ElRow from "element-ui/packages/row/src/row";
    //注意路径
    export default{
        data(){
            return {
              merchantGroupName:"",
              merchantGroupId:"",
                todayAmount:0,
                weekAmount:0,
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                monthAmount:0,
                tradeType:"today",
                districtType:"shop",
                tradeDate:"",
                lastQueryDate:"",
                labels:['莲湖店','雁塔店','未央店','高新店'],
                shouldAmounts:[0, 100, 200, 1000],
                realAmounts:[20, 30, 40, 0],
                totalNums:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                dishesTop:[
                  {value:335, name:'直接访问'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1548, name:'搜索引擎'}
                ],
                dishesTopAmount:10
            }
        },
        created(){
            window.this = this;
            this.tradeDate = this.moment().format("YYYY-MM-DD");
            this.initData();
        },
        mounted() {
            this.getChart();
            this.queryTradeData();
        },
		components:{
      ElRow,
      PluginConfirm
        },
        computed:{
            queryDate(){
                if(this.tradeDate instanceof Date){
                    return this.moment(this.tradeDate).format("YYYY-MM-DD");
                }
                return this.tradeDate;
            }
        },
        watch:{

        },
        methods: {
            /*用户选择提示框后处理*/
            dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            goBack() {
                this.router.go(-1);
            },
            initData(){
                this.$axios.get("baseInfo/today").then((data)=>{
                    console.log("data:>>>>>>>>>>>>>>> : ",data);
                    if(data.status==200){
                        this.merchantGroupId = data.content.merchantGroupId;
                        this.merchantGroupName = data.content.merchantGroupName;
                    }else{
                       /* this.$message({
                            type: 'error',
                            message: data.msg
                        });*/
                    }
                });
            },
          changeDistricType(val){

          },
            changeType(newVal){
               /* let date = this.moment().format("YYYY-MM-DD");
                if(newVal=="month"){
                    date = date.substring(0, 7)+"-01";
                }
                if(newVal=="year"){
                    date = date.substring(0, 4)+"-01-01";
                }
                this.tradeDate = date;
                this.queryTradeData();*/
            },
            queryTradeData:function(){
                var search = "?type="+this.tradeType+"&start="+this.tradeDate;
                this.lastQueryDate = this.tradeDate;
                this.$http.get("baseInfo/queryTotalChart"+search).then((res)=>{
                    if(res.body.status==200){
                        this.labels = res.body.content.labels;
                        this.tradeDate=res.body.content.date;
                        let result = res.body.content.results;
                        this.shouldAmounts = [];
                        this.realAmounts = [];
                        this.totalNums=[];
                        for(let i=0;i<result.length;i++){
                            this.shouldAmounts.push(result[i].receive_amount.toFixed(2));
                            this.realAmounts.push(result[i].real_amount.toFixed(2));
                            this.totalNums.push(result[i].total);
                        }

                        this.dishesTop = [];
                        this.dishesTopAmount = res.body.content.dishesTop.totalAmount;
                        for(let i=0;i<res.body.content.dishesTop.dataList.length;i++){
                            let dishesItem = res.body.content.dishesTop.dataList[i];
                            this.dishesTop.push({
                                name: dishesItem.dishes_name,
                                value: dishesItem.real_amount
                            });
                        }
                        this.getChart();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.body.message
                        });
                    }
                });
            },
            getChart(){
                let myChart = echarts.init(document.getElementById('myChart'));
                let labels = this.labels;
                let shouldAmounts = this.shouldAmounts;
                let realAmounts = this.realAmounts;
                let totalNums  = this.totalNums;
                myChart.setOption({
                    title : {
                      text:'营业额单位：元',
                      top:'bottom',
                      left:'center'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow'
                        }
                    },
                    legend: {
                        data:['应收金额','实收金额']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            magicType : {show: true, type: ['line', 'bar']},
                            restore:{},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [{
                      type: 'value',
                    }],
                    yAxis : [{
                      type: 'category',
                      data:  labels
                    }],
                    series : [{
                            name:'应收金额',
                            type:'bar',
                            data: shouldAmounts
                        },{
                            name:'实收金额',
                            type:'bar',
                            data: realAmounts
                        }]
                });

                //商品营收占比
                let myChart1= echarts.init(document.getElementById('myChart1'));
                let datas = this.dishesTop;
                myChart1.setOption({
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [{
                        name: '商品实收占比',
                        type: 'pie',
                      radius: ['50%', '70%'],
                        center: ['50%', '60%'],
                        data: datas,
                      avoidLabelOverlap:false,
                      label: {
                        normal: {
                          show: false,
                          position: 'center'
                        },
                        emphasis: {
                          show: true,
                          textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                          }
                        }
                      },
                      labelLine: {
                        normal: {
                          show: false
                        }
                      },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });

              //商品分类营收占比

              let myChart2= echarts.init(document.getElementById('myChart2'));
              myChart2.setOption({
                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [{
                  name: '商品实收占比',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  center: ['50%', '60%'],
                  data: datas,
                  avoidLabelOverlap:false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }]
              });


                /*收银异常数据*/
              let myChart3 = echarts.init(document.getElementById('myChart3'));
              myChart3.setOption({
                title : {
                  text:'异常数据：单',
                  top:'bottom',
                  left:'center',
                  padding:0,
                  textStyle:{
                    color:'#777777',
                    fontSize:'16px',
                    fontWeight:'bolder'
                  }
                },
                tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {
                  data:['应收金额','实收金额']
                },
                toolbox: {
                  show : true,
                  feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    restore:{},
                    saveAsImage : {show: true}
                  }
                },
                calculable : true,
                xAxis : [{
                  type: 'value',
                }],
                yAxis : [{
                  type: 'category',
                  data:  labels
                }],
                series : [{
                  name:'应收金额',
                  type:'bar',
                  data: shouldAmounts
                },{
                  name:'实收金额',
                  type:'bar',
                  data: realAmounts
                }]
              });

            },

        }
    }
</script>
<style scoped>
    .title{
        background-color: #FFF;
        padding: 0 0 15px 15px;
       text-align: left;
    }

    .bg-content{
      background-color: #fff;
      margin: 10px 10px 0;
      height: 90px;
    }

    .grid-content{
      margin: 10px 10px 0;
      height: 110px;
    }
    .grid-bottom{
      height: 50px;
      background-color: #ffffff;
      padding-left: 15px;
      line-height: 50px;
      margin: 0 10px 10px;
      text-align: left;
    }
    .iconColor{
      color: #1ab394;
    }
    .money-value{
      font-size: 20px;
      font-weight:700;
    }
    .icon-chart{
      background-color: #FFF;
      height: 550px;
    }
    .table-padding{
      padding:5px 15px;
    }

    .info-block-title{
      text-align: left;
      font-weight: bold;
      padding: 15px 0 15px 15px;
      border-bottom:1px solid #D1DBE5;
    }
  .border-right-color{
    border-right: 1px solid #D1DBE5;
  }
</style>
